<template>
  <div>
    <h4>路由组件的更新守卫</h4>
    <pre>
beforeRouteUpdate 守卫的主要作用,用于解决vue对只有参数变化的路由切换不完成路由组件的删除和重新创建的操作.
  1. 地址不变,参数变化,路由组件的常规生命周期无法执行
  2. 基于常规生命周期的初始化请求操作无法获取最新参数
  3. 通过该守卫的to属性可以获取最新的参数
    </pre>
    <p>$route:{{ $route.query.msg }}</p>
  </div>
</template>

<script>
export default {
  beforeRouteUpdate(to, from, next) {
    console.log(
      "CompoentUpdateView 的路由地址切换未发生变化,只有参数发生变化=>beforeRouteUpdate"
    );
    console.log(this.$route.query.msg); // 上一次的参数
    console.log(to.query.msg); // 本次参数变化后的数据

    next();
  },
  created() {
    console.log("基于路由参数的请求数据操作:", this.$route.query.msg);
  },
};
</script>
